<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <el-table
            :data="list"
            style="width: 100%"

            class="card-table"
            :border="false"
            stripe
            :default-sort="{prop: 'five'}"
          >
            <el-table-column
              show-overflow-tooltip
              type="index"
              label="序号"
              min-width="50%"
              align="center"
            />

            <el-table-column
              show-overflow-tooltip
              label="名称"
              prop="title"
              min-width="150"
              align="center"
            >
              <template slot-scope="scope">
                <img v-if="scope.row.poster !== null && scope.row.poster !== ''" :src="scope.row.poster" width="33" height="32" style="margin-right:6px;vertical-align: middle;">
                <i>{{ scope.row.title }}</i>
              </template>
            </el-table-column>

            <el-table-column
              show-overflow-tooltip
              label="主图"
              prop="title"
              min-width="150"
              align="center"
            >
              <template slot-scope="scope">
                <img v-if="scope.row.cover !== null && scope.row.cover !== ''" :src="scope.row.cover" width="33" height="32" style="margin-right:6px;vertical-align: middle;">
              </template>
            </el-table-column>

            <el-table-column
              show-overflow-tooltip
              label="标签"
              prop="tag"
              min-width="150"
              align="center"
            >
              <!-- <template  slot-scope="scope">
                 <img  :src="scope.row.tag"  width="33" height="32" style="margin-right:6px;vertical-align: middle;">
              </template> -->
            </el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="viewCount"
              label="点击量"
              min-width="100"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              label="状态"
              prop="status"
              :formatter="rowFn"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="publishDate"
              :formatter="dateFormatRow"
              label="发布日期"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip

              label="操作"
              align="center"
              width="200"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" class="blueCfn" @click="editRow(scope.row)">编辑</el-button>
                <el-button type="text" size="small" class="blueCfn" @click="deleteRow(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :v-show="total > 0"
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 50,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { page, removeServiceItem } from '@/api/serviceItem'
import { dateFormatRow, publishStatusFormat } from '@/utils/common'

export default {
  components: { },
  props: {
    activeName: {
      type: String
    },
    resoDataTwo: {
      type: Object
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      objMo: {
        show: false,
        title: '选择房产来源',
        width: '536px'
      },
      list: [],
      sizeForm: {},
      radio: 3,
      dateFormatRow,
      publishStatusFormat
    }
  },
  watch: {
    currentPage: {
      handler(newVal) {
        newVal && this.getList()
      }
    },
    pageSize: {
      handler(newVal) {
        newVal && this.getList()
      }
    },
    resoDataTwo: {
      handler(newVal) {
        this.list = newVal.data.records
        this.total = newVal.data.total
        this.loading = false
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      const query = { page: this.currentPage, limit: this.pageSize }
      page(query).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    getListSs(query) {
      this.loading = true
      //  const query = { page: this.currentPage, limit: this.pageSize }
      page(query).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    editRow(item) {
      sessionStorage.setItem('sveitem', JSON.stringify(item))
      this.$router.push({ path: 'serviceListEdit?id=' + item.id })
    },
    deleteRow(row) {
      removeServiceItem(row.id).then(response => {
        // this.list = response.data.records
        // this.total = response.data.total
        // this.loading = false
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    close() {
      this.objMo.show = false
    },
    save() {
      console.log('123')
    },
    rowFn(e) {
      if (e.status === 1) {
        return '已发布'
      } else {
        return '未发布'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf, ::v-deep .el-table td,::v-deep .el-table__body{border: 0;}
::v-deep .el-table::before ,::v-deep .el-table__fixed-right::before{display: none;}
::v-deep  th{background: #f7f7f7;font-weight: normal;color: #101010;}
.imt{vertical-align: bottom;width: 30px;height: 30px}
.imh{width: 150px;height: 150px;vertical-align: bottom;}
.blueCfn{color: #5794FF;}
</style>

